<template>
  <div class="container">
    <h1>触摸拖动</h1>

    <g-touch class="touch" :style="'transform: translate('+x+'px,'+y+'px)'" @touching="touching" @touchend="touchend" @touchstart="touchstart">拖动我试试</g-touch>
  </div>
</template>
<script>
  import touch from '../components/touch/index'
  export default {
    data() {
      return {
        startX: 0,
        startY: 0,
        x: 0,
        y: 0,
        previousX: 0,
        previousY: 0
      }
    },
    components: {
      'g-touch': touch
    },
    methods: {
      touchstart(x, y) {
        this.startX = x;
        this.startY = y;


      },
      touching: function (x, y) {

        this.x = (x + this.previousX - this.startX);
        this.y = (y + this.previousY - this.startY);
      },
      touchend: function (x, y) {

        this.previousX = x - this.startX + this.previousX;
        this.previousY = y - this.startY + this.previousY;

      }
    }
  }

</script>
<style lang="less" scoped>
  .touch {
    width: 80px;
    height: 80px;
    background: red;
    color: #FFF;
    font-size: 13px;
    line-height: 80px;
    text-align: center;
    position: absolute;
  }

</style>
